/* eslint-disable no-sequences */
<template>
  <div class="wrap">
    <common-head :title="title" />
    <!-- 详情页轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- /详情页轮播 -->
    <div class="item-info">
      <h5>{{basicInfo.name}}</h5>
      <p>￥{{basicInfo.minPrice}}</p>
    </div>
    <div class="content" v-html="content"></div>
    <!-- 商品底部导航栏 -->
    <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="home-o" text="首页" />
      <van-goods-action-icon :badge="$store.state.cart.items.length" @click="$router.push('/cart')" icon="cart-o" text="购物车" />
      <van-goods-action-button color="#303030" @click="showSku(0)" type="warning" text="加入购物车" />
      <van-goods-action-button color="#FF734C" @click="showSku(1)" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品底部导航栏 -->
    <!-- 商品规格弹出层 -->
    <van-popup v-model="show" position="bottom" round closeable :style="{ height: '40%' }">
      <div style="padding:10px">
          <van-card
            :num="sku.number"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
          <template #footer>
            <van-stepper v-model="sku.number"/>
            <van-button @click="confirmItem" size="large" color="#ff734c">确定</van-button>
          </template>
        </van-card>
      </div>
    </van-popup>
    <!-- /商品规格弹出层 -->
  </div>
</template>

<script>
import CommonHead from '_components/CommonHead'
import { fetchDetail, addCart } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  name: 'detail',
  data () {
    return {
      title: '商品详情页',
      basicInfo: {},
      pics: [],
      content: '',
      // 商品规格
      sku: {
        number: 1
      },
      show: false,
      action: 0 // 0加入购物车 1 提交到订单页
    }
  },
  created () {
    this.fetchItemDetail()
  },
  methods: {
    confirmItem () {
      // 点击商品规格确定按钮
      if (this.action === 0) {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/set_items', res.data.data.items)
            Toast({
              type: 'success',
              duration: 1000,
              message: '加入购物车成功',
              onClose: () => {
                this.show = false
              }
            })
          }
        })
      } else {
        alert('提交到订单页')
      }
    },
    showSku (n) {
      this.show = true
      this.action = n
    },
    fetchItemDetail () {
      fetchDetail({
        id: this.$route.params.id
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.title = this.basicInfo.name
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 50px;
}
.my-swipe{
  img{
    width:100%;
  }
}
.content{
  /deep/ img{
    display: block;
    width: 100%;
  }
}
</style>
